<template>
	<div class="early-warning es-each-line">
		<div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
	     	<div class="widget am-cf">
	        	<div class="widget-body am-fr">
					<div class="am-u-md-12 one-line">
	                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form">
				            <div class="am-form-group">
				            	<input type="text" v-model="query.phoneNo" placeholder="请输入手机号"/>
				            </div>
				        </div>
				        <el-date-picker class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
		                	v-model="classDate"
		                	type="daterange"
		                	placeholder="请选择发送日期">
		                </el-date-picker>
                    	<div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group am-u-end">
					    	<button @click="search" type="button" class="btn-search am-btn am-btn-default am-btn-success">
					        	<span class="am-icon-search"></span>查询
					    	</button>
					    </div>
                    </div>

				    <div class="am-u-sm-12">
			            <el-table
			              :data="tableData"
			              border
			              stripe
			              :empty-text="tableNoDataTips"
			              style="min-width: 100%">
			              <!-- <el-table-column
			                prop="smsType"
			                label="业务类型">
			              </el-table-column> -->
			              <el-table-column
			                label="接收手机号"
			                prop="phoneNo">
			              </el-table-column>
			              <el-table-column
			                label="发送时间"
			                prop="updateTime">
			                <template scope="scope">
			                  {{scope.row.updateTime | formatTime }}
			                </template>
			              </el-table-column>
			              <el-table-column
			                label="内容"
			                prop="content">
			              </el-table-column>
			            </el-table>
			        </div>

			        <div class="am-u-lg-12 am-cf">
			            <div class="am-fr">
			            	<pagination v-bind:total="total" v-bind:pageNo="query.pageNo" v-bind:pageSize="query.pageSize" @paging="handleSearch" />
			            </div>
			        </div>
	        	</div>
	        </div>
	    </div>
	</div>
</template>
<script>
	import io from '../../lib/io'
	import moment from 'moment'
	import Pagination from '../base/Pagination'
	export default{
		data(){
			return {
				tableNoDataTips: '暂无数据',
				tableData: [],
				query:{
					phoneNo: '',
					pageNo: 1,
					pageSize: 10,
					startDate: '',
					endDate: ''
				},
				classDate: '',
				total: 0,
			}
		},
		components: {
	    	Pagination
	    },
	    watch:{
	    	classDate(newVal) {
		        this.query.startDate = newVal[0] ? this.$options.filters.formatDate(newVal[0]) : ''
		        this.query.endDate = newVal[1] ? this.$options.filters.formatDate(newVal[1]): ''
		    }
	    },
		methods:{
	      	search(){
	      		this.query.pageNo = 1;
	      		this.handleSearch();
	      	},
	      	handleSearch(pageNo){
	      		let formData = this.getFormDate(pageNo);
	      		io.post(io.smsPage, formData , (ret) => {
		        	if(ret.success){
		        		this.tableData = ret.data.list;
		        		this.total = ret.data.total;
		        	}		        	
		        })
	      	},
	      	getFormDate(pageNo){
	      		this.query.pageNo = pageNo || this.query.pageNo || 1
	      		let formData = {};
	      		for(var key in this.query){
	      			if(Array.isArray(this.query[key])){
	      				formData[key] = this.query[key].join(",");
	      			}else if(typeof this.query[key] === "boolean"){
	      				if(this.query[key]){
	      					formData[key] = 1
	      				}
	      			}else {
	      				if((this.query[key] + '').trim() !== ''){
		      				formData[key] = this.query[key];
		      			}
	      			}
	      		}
	      		return formData;
	      	},
		},
		created(){
			$(window).smoothScroll()
	    	this.handleSearch();
	    },
	}
</script>
<style lang="less">
	
</style>